<template>
	<view>
		<!-- <nav-bar isBack title="发布评价"></nav-bar> -->
		<nav-bars bgColor="#fff" fontColor="#000" title="发布评价"></nav-bars>
		<view class="RateView">
			<view class="RateTitle" style="display: flex;align-items: flex-start;">
				<view style="width: 150rpx;height: 150rpx;overflow: hidden;border-radius: 14rpx;"><image :src="PackDetail.lead_img" mode=""></image></view>
				<view style="flex: 1;margin-left: 20rpx;">
					<view style="background: #FFA500;width: max-content;color: #fff;border-radius: 6rpx;font-size: 26rpx;padding: 4rpx 8rpx;margin-bottom: 15rpx;">产品包</view>
					<view class="ellipsisTextOne" style="font-size: 26rpx;color: #666;margin-bottom: 15rpx;">{{ PackDetail.name }}</view>
					<view style="font-size: 24rpx;color: #999;"></view>
				</view>
			</view>
			<view class="RateItem">
				<text class="RateItemText">描述相符</text>
				<u-rate size="40" active-color="#FFD425" inactive-color="#E6E6E6" inactive-icon="star-fill" v-model="value1" gutter="20"></u-rate>
				<text class="RateChange">{{ valueChangeOne(value1) }}</text>
			</view>
		</view>

		<view class="evalPublish">
			<view class="pubContent">
				<textarea value="" v-model="content" placeholder-class="placeStyle" placeholder="说说你的使用感受，为更多小伙伴购买提供参考~" />

				<view class="imgWrap" v-if="type == 0">
					<view class="imgBox" v-for="(item, index) in imgList" :key="index">
						<image :src="item.path" mode=""></image>
						<image
							style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`"
							mode=""
							@click="removeImg(index)"
						></image>
					</view>
					<view class="img">
						<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg"></image>
						照片
					</view>
				</view>
				<view class="imgWrap" v-if="type == 1">
					<view class="imgBox" v-for="(item, index) in imgList" :key="index">
						<!-- <image :src="item.path" mode=""></image> -->
						<video
							style="	width: 164rpx;height: 164rpx;"
							:show-center-play-btn="false"
							:src="item.path"
							@pause="stopVideo"
							controls
							@fullscreenchange="openBig"
							play-btn-position="center"
						></video>
						<image
							style="position: absolute;top: 0;right: 0;width: 40rpx;height: 40rpx;"
							:src="`${baseImg}/static/constr/remove.png`"
							mode=""
							@click="removeImg(index)"
						></image>
					</view>
					<view class="img">
						<image :src="`${baseImg}/static/onePlusN/addImg.png`" mode="" @click="uploadImg"></image>
						视频
					</view>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;padding: 20rpx 0;">
					上传视频：
					<u-switch size="40" @change="changeType" v-model="TypeChecked"></u-switch>
				</view>
				<view class="toselect">
					<u-checkbox-group active-color="#C3AB7C"><u-checkbox v-model="checked" shape="circle">匿名提交</u-checkbox></u-checkbox-group>
					<span>您的用户昵称和头像将不会对外展示</span>
				</view>
			</view>
			<view class="btn"><button type="default" @click="gitData">发布</button></view>
		</view>
	</view>
</template>
<script>
import URL from '@/config/url.js';
import GoodsEvaluate from '@/service/GoodsEvaluate.js';
export default {
	name: 'add',
	components: {},
	data() {
		return {
			baseImg: 'http://manager.ryz1620.com',
			checked: false,
			name: '',
			content: '',
			value1: 0, //综合评星
			imgList: [],
			type: 0,
			TypeChecked: false,
			ordecoder: '',
			packid: '',
			PackDetail: null
		};
	},
	onLoad(options) {
		this.$utils.getUrl()
		// pages_design/pages/design/evaluate/add
		console.log(options);
		this.ordecoder = options.ordecoder;
		this.packid = options.packid;
		this.getGoods();
	},
	computed: {},
	created() {},
	mounted() {},
	methods: {
		getGoods() {
			var that = this;
			var params = {
				pack_id: that.packid
			};
			GoodsEvaluate.GoodsPack(params).then(res => {
				if (res.code == 1) {
					var data = res.data.productPack;
					that.PackDetail = data;
					console.log(data);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		changeType(e) {
			// console.log(e);
			this.type = e == true ? 1 : 0;
		},
		valueChangeOne(star) {
			let text = '';
			switch (star) {
				case 0:
					text = '';
					break;
				case 1:
					text = '很差';
					break;
				case 2:
					text = '差';
					break;
				case 3:
					text = '一般';
					break;
				case 4:
					text = '好';
					break;
				case 5:
					text = '非常好';
					break;
				// default:
			}
			return text;
		},
		gitData() {
			var that = this;
			let arr = [];
			this.imgList.map(item => {
				arr.push(item.id);
			});
			// if (!arr.length) {
			// 	uni.showToast({
			// 		title: this.type == 0 ? '请上传图片' : '请上传视频',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			if (that.value1 <= 0) {
				uni.showToast({
					title: '请上进行评分',
					icon: 'none'
				});
				return;
			}
			if (that.content == '') {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				});
				return;
			}
			let data = {
				order_code: that.ordecoder, //订单号
				content: that.content, //评价内容
				type: that.type, //(0图片,1视频)
				file: arr.join(','), //媒体
				score: that.value1, //综合评星
				is_anonymous: that.checked == false ? 0 : 1 //是否匿名(0否,1是)
			};
			GoodsEvaluate.PackComment(data).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '评价成功',
						icon: 'success',
						duration: 2000
					});
					this.imgList = [];
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		//移除图片
		removeImg(index) {
			this.imgList.splice(index, 1);
		},
		uploadImg() {
			let that = this;
			if (this.type == 0) {
				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: URL.ENTER_UPLOAD_IMAGE,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								user: 'test'
							},
							success: uploadFileRes => {
								uni.showLoading({
									title: '上传中'
								});
								console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 1) {
									console.log(data, '图片数据');
									that.imgList.push({
										path: data.data.url,
										id: data.data.id
									});
									console.log(that.imgList);
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									});
								} else {
									uni.showToast({
										title: data.msg,
										icon: 'none'
									});
								}
								setTimeout(function() {
									uni.hideLoading();
								}, 500);
							}
						});
					}
				});
			} else {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: res => {
						const tempFilePaths = res.tempFilePath;
						console.log(tempFilePaths);
						uni.uploadFile({
							url: URL.ENTER_UPLOAD_IMAGE,
							filePath: tempFilePaths,
							name: 'file',
							success: uploadFileRes => {
								uni.showLoading({
									title: '上传中'
								});
								console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 1) {
									console.log(data);
									let obj = {
										path: data.data.url,
										id: data.data.id
									};
									this.imgList.push(obj);
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									});
									console.log(this.imgList);
								} else {
									uni.showToast({
										title: data.msg,
										icon: 'none'
									});
								}
								setTimeout(function() {
									uni.hideLoading();
								}, 500);
							}
						});
					}
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.ellipsisTextOne {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.RateView {
	margin: 24rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 28rpx;

	.RateTitle {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		.RateText {
			font-size: 28rpx;
			font-weight: 600;
			color: #0a0605;
			margin-right: 10rpx;
		}
	}

	.RateItem {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;

		.RateChange {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #ffce0d;
		}

		.RateItemText {
			font-size: 28rpx;
			font-weight: 400;
			color: #0a0605;
			margin-right: 20rpx;
		}
	}
}

.evalPublish {
	border-radius: 16rpx;
	padding-bottom: 100rpx;

	.pubContent {
		width: 702rpx;
		// height: 606rpx;
		background-color: #fff;
		margin: 24rpx auto;
		padding: 40rpx 28rpx;

		textarea {
			width: 100%;
		}

		.placeStyle {
			font: 400 26rpx/40rpx PingFang SC;
			color: #a0a0a0;
		}

		.imgWrap {
			display: flex;
			align-items: center;

			.imgBox {
				width: 164rpx;
				height: 164rpx;
				display: flex;
				border-radius: 4rpx;
				margin-right: 5rpx;
				position: relative;

				image {
					width: 164rpx;
					height: 164rpx;
					border-radius: 4rpx;
				}
			}

			.img {
				width: 164rpx;
				height: 164rpx;
				border-radius: 4rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #f6f7fb;
				font: 400 18rpx/20rpx;
				color: #a0a0a0;

				image {
					width: 56rpx;
					height: 56rpx;
					border-radius: 4rpx;
				}
			}
		}

		.toselect {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;
			font: 400 26rpx/40rpx PingFang SC;
			color: #505050;

			span {
				font: 400 24rpx/36rpx PingFang SC;
				color: #a0a0a0;
			}
		}
	}

	// 发表按钮
	.btn {
		width: 100%;
		height: 108rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		height: calc(108rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(108rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/

		button {
			width: 520rpx;
			height: 88rpx;
			margin: 10rpx auto;
			background-color: #c3ab7c;
			border-radius: 44rpx;
			font: 600 32rpx/88rpx PingFang SC;
			color: #fff;
		}
	}
}
</style>
